<template>
  <Card dis-hover :bordered="false">
    <Form class="ivu-mb-16">
      <Button type="primary" @click="handleAdd"  v-hasC="{ name: 'v1-base-problem-update-problem', flag: 'v1/base/problem/update-problem'}">新增</Button>
    </Form>
    <Table :columns="columns" :data="list" :loading="loading" :border="true" v-hasC="{ name: 'v1-base-problem-index', flag: 'v1/base/problem/index'}">
      <template #status="{ row }">
        <Badge v-if="row.status == 1" status="success" text="正常" />
        <Badge v-if="row.status == 0" status="error" text="停用" />
      </template>
      <template #action="{ row }">
        <a @click="handleEdit(row)" v-hasC="{ name: 'v1-base-problem-update-problem2', flag: 'v1/base/problem/update-problem'}">编辑</a>
        <Divider type="vertical"  v-hasC="{ name: 'v1-base-problem-delete-problem', flag: 'v1/base/problem/delete-problem'}"></Divider>
        <a @click="handleDelete(row)" class="delete" v-hasC="{ name: 'v1-base-problem-delete-problem', flag: 'v1/base/problem/delete-problem'}">删除</a>
      </template>
    </Table>
    <Modal
      :title="add ? '新增' : '编辑'"
      width="960"
      v-model="modal"
      :mask-closable="false"
      :draggable="true"
      @on-cancel='handleCancel'
    >
      <Form :label-width="118" ref="formValidate" :model="formData"  :rules="rules">
        <FormItem label="标题名称" prop="question">
          <Input placeholder="请输入标题名称" v-model="formData.question"/>
        </FormItem>
        <FormItem label="内容" prop="answer">
          <Input type="textarea" row="6" v-model="formData.answer"/>
        </FormItem>
        <FormItem label="排序">
          <InputNumber :precision="0" v-model="formData.sort" :min="0"/>
        </FormItem>
        <FormItem label="状态">
          <Switch v-model="formData.status"/>
        </FormItem>
      </Form>
      <template #footer>
            <Button @click="handleCancel">取消</Button>
            <Button type="primary" @click="saveData" :loading="modalLoading">确定</Button>
    </template>
    </Modal>
  </Card>
</template>
<script>
import { problemList ,problemAddUpdate ,problemDel} from '@/api/jzy'
export default {
  name: 'modalName',
  data () {
      return {
          add: true,
          modal: false,
          formData: {
              id:0,
              question:'',
              answer:'',
              sort: 1,
              status:true
          },
          loading: false,
          columns: [
              {
                  title: '标题名称',
                  key: 'question',
                  width: 128
              },
              {
                  title: '内容',
                  key: 'answer',
                  minWidth: 158
              },
              {
                  title: '排序',
                  key: 'sort',
                  width: 118
              },
              {
                  title: '状态',
                  slot: 'status',
                  width: 118,
                  sortable: true
              },
              {
                  title: '创建时间',
                  key: 'created_at',
                  width: 158
              },
              {
                  title: '操作',
                  slot: 'action',
                  width: 118
              }
          ],
          list: [],
          rules:{
            question:[
                { required: true, message: '请输入标题名称',trigger:'bulr' }
            ],
            answer:[
            { required: true, message: '请输入内容',trigger:'bulr' } 
            ]
          },
          modalLoading:false
          
      }
  },
  methods: {
      getData () {
          this.loading = true
          problemList().then(res => {
              this.list = res
          }).finally(() => {
              this.loading = false
          })
      },
      handleAdd () {
          this.formData={
              id:0,
              question:'',
              answer:'',
              sort: 1,
              status:true
          },
          this.add = true
          this.modal = true
          this.parms=this.formData
      },
      handleEdit (e) {
          this.add = false
          this.modal = true
          this.formData={
              id:e.id,
              question:e.question,
              answer:e.answer,
              sort: e.sort,
              status:e.status==1?true:false
          }          
      },
      handleDelete (e) {
          this.$Modal.confirm({
              title: '温馨提示',
              content: '确定删除此项?',
              onOk: () => {
                  problemDel({id:e.id}).then(res=>{
                      this.getData()
                  })
              }
          })
      },
      handleCancel(){
        this.modal=false
        this.$refs.formValidate.resetFields();
      },
      saveData(){
        this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        this.modalLoading=true
                        this.formData.status=this.formData.status?'1':'0'
                        problemAddUpdate(this.formData).then(res => {
                            this.modalLoading=false
                            this.handleCancel()
                            this.getData()
                        }).catch(()=>{
                            this.modalLoading=false
                        })
                    } 
                })
        
      }
  },
  mounted () {
      this.getData()
  }
}
</script>
<style lang='less' scoped>
.imageUpdate {
  display: flex;
}

.delete {
  color: rgb(226, 5, 5);
}
</style>
